<style scoped lang="scss" >
    .bigdata-circle-container{ 
        display: inline-block;
        text-align: center; flex: 1;
        div.circle{
            border-radius: 50%;
            padding: 10px;
            margin: 0 auto;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;

            .value{
                font-size: 24px;
            }
            .label{
                font-size: 12px; 
            }
        }
        .primary-circle{
            
            background: url(./../../../assets/images/bigData/circle-primary.png) no-repeat;
            background-position: center;
            background-size: 100%;
            // box-shadow: 0px 0px 10px rgba(43, 241, 236, 1);

            .value, .label{
                color: rgba(43, 241, 236, 1);
            }
        }

        .warning-circle{}

        .danger-circle{
            color: rgba(252, 94, 61, 1);
            background: url(./../../../assets/images/bigData/circle-danger.png) no-repeat;
            background-position: center;
            background-size: 100%;
            // box-shadow: 0px 0px 10px rgba(252, 94, 61, 1);

            .value, .label{
                color: rgba(252, 94, 61, 1);
            }

        }
    }
</style>
<template>
  <div class="bigdata-circle-container" >
      <template v-if="type=='primary'">
        <div class="circle primary-circle" :style="{width: width, height: width}">
            <div class="value">{{value}}</div>
            <div class="label">{{label}}</div>
            <slot name="circleContent"></slot>
        </div>
      </template>
      <!-- <template v-else-if="type=='warning'">
          <div class="circle warning-circle" :style="{width: width, height: width}">
              <div class="value">{{value}}</div>
            <div class="label">{{label}}</div>
            <slot name="circleContent"></slot>
        </div>
      </template> -->
      <template v-else-if="type=='danger'">
          <div class="circle danger-circle" :style="{width: width, height: width}">
              <div class="value">{{value}}</div>
            <div class="label">{{label}}</div>
            <slot name="circleContent"></slot>
        </div>
      </template>
      

      
  </div>
</template>

<script>
export default {
  name: "BigDataCircle1",
  data() {
    return {

    };
  },
  props: {
    type: {
        type: String, default: 'primary',
    },
    width: {
        type: String, default: '60px'
    },
    value: {
        type: String | Number,
        default: null,
    },
    label: {
        type: String,
        default: null
    }
  },
  created(){

  },
  methods: {

  },
};
</script>